<template>
	<view class="content">
		<view class="headView content">
			<view style="width: 750rpx;height: 225rpx;background-color: #34C0AE;"></view>
			<zeng-calen style="margin-top: -210rpx;width: 690rpx;" :actDay="actDay" :chooseDay="chooseDay"
				@onDayClick='onDayClick' @onChangeMonth="onChangeMonth"></zeng-calen>
		</view>
		<view class="dateTips">
			<view class="dateTips_dot"></view>
			<text>{{choose}}</text>
		</view>
		<scroll-view scroll-y="true" scroll-with-animation="true" enable-flex="true" class="scroll-v">
			<view v-if="!isHistroyData" class="content">
				<image style="margin-top: 30rpx; width: 364rpx;"
					:src="staticUrl + '/image/detection/history/img_noData.png'" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
			<view class="Item" v-else v-for="(item, index) in historyReport" :key="index">
				<view class="item_l ML50">
					<view>
						<text style="font-size: 28rpx;font-weight: bold;color: #000;">健康状态:</text>
						<text class="item_l_des"
							:style="{color: getColorLevel(item.synScore,1)}">{{getColorLevel(item.synScore,2)}}</text>
					</view>
					<text
						style="margin-top: 15rpx;font-size: 22rpx;font-weight: bold;color: #96A3B4;">时间:{{ item.createTime.slice(11, 16) }}</text>
				</view>
				<view class="item_r content" @click="toDetail(index)">
					查看
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import * as api from '@/api/login';
	import config from '../../../config'
	const _SCORELEVEL = config.SCORELEVEL
	export default {
		data() {
			return {
				staticUrl: this.$config.StaticUrl,
				isHistroyData: false, //是否有历史数据
				historyReport: [], //用户的历史报告
				choose: '',
				actDay: [], //用户选择的日期
				chooseDay: [],
			};
		},
		onLoad() {
			this.choose = this.$utils.Current_date()
			let date = this.$utils.getCurrentMonthTime(this.choose)
			this.getHistoryReport(date, true)
			this.onDayClick({
				date: this.choose
			})
		},
		methods: {
			// 展开日历
			onDayClick(data) {
				let choose = data.date //用户点中的数据
				this.choose = data.date
				this.actDay = [choose]
				let choiceTime = [choose + ' 00:00:00', choose + ' 23:59:59']
				this.getHistoryReport(choiceTime, false)
			},
			//切换月度
			onChangeMonth(data) {
				this.historyReport = []
				let date = this.$utils.getCurrentMonthTime(`${data.year}/${data.month}/01`)
				this.getHistoryReport(date, true)
			},
			// 获取历史报告
			getHistoryReport(choiceDate, isMonth) {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					params: {
						gtSearchKey: {
							createTime: choiceDate[0]
						},
						ltSearchKey: {
							createTime: choiceDate[1]
						},
						orderDesc: 'createTime',
						currentPage: 1,
						pageSize: 1000
					}
				};
				api.getHistoryReport(data).then(function(res) {
					console.log('请求历史数据 ', res);
					if (res.data.success) {
						if (res.data.data.total == 0) {
							that.$toast(isMonth ? '本月无检测数据!' : '今日没有检测')
							if (!isMonth) that.isHistroyData = false
							return
						}
						that.isHistroyData = true
						if (isMonth) {
							that.calcHistoryData(res.data.data.reportList)
						} else {
							that.historyReport = res.data.data.reportList
						}
					} else if (res.data.code == 2001) {
						if (res.data.message == 'currentIndex 超出历史报告数量') {} else if (res.data.message ==
							'该用户无任何检测报告') {
							that.isHistroyData = false;
						}
					}
				}).catch(function(error) {
					console.log('get history Data fail', error);
				});
			},
			//根据颜色设置颜色/文字
			getColorLevel(score, model) {
				let color, des
				if (score < _SCORELEVEL[0]) {
					color = '#E43241'
					des = '高风险'
				} else if (score < _SCORELEVEL[1]) {
					color = '#E2732F'
					des = '中风险'
				} else if (score < _SCORELEVEL[2]) {
					color = '#E9AA2F'
					des = '低风险'
				} else if (score < _SCORELEVEL[3]) {
					color = '#99CC48'
					des = '亚健康'
				} else {
					color = '#01B09A'
					des = '健康'
				}
				if (model == 1) {
					return color
				} else {
					return des
				}
			},
			//将历史报告按天分开
			calcHistoryData(reportList) {
				let hasDataDay = []
				let dataInfo = {}
				reportList.forEach((item) => {
					if (!hasDataDay.some(ele => ele == item.createTime.slice(0, 10))) {
						hasDataDay.push(item.createTime.slice(0, 10))
					}

					let data_createTime = item.createTime.slice(0, 10)
					if (dataInfo[data_createTime] == undefined) {
						dataInfo[data_createTime] = item.synScore
					} else {
						if (dataInfo[data_createTime] > item.synScore) {
							dataInfo[data_createTime] = item.synScore
						}
					}
				})
				// console.log('包含的天--', dataInfo);
				for (let item in dataInfo) {
					let type = -1
					if (dataInfo[item] < _SCORELEVEL[0]) {
						type = 0
					} else if (dataInfo[item] < _SCORELEVEL[1]) {
						type = 1
					} else if (dataInfo[item] < _SCORELEVEL[2]) {
						type = 2
					} else if (dataInfo[item] < _SCORELEVEL[3]) {
						type = 3
					} else {
						type = 4
					}
					this.chooseDay.push({
						date: item,
						type
					})
				}
			},
			// 跳到详情
			toDetail(index) {
				// console.log('需要的详细信息', this.historyReport[index]);
				let lastData;
				let length = this.historyReport.length - 1;
				if (index != length) {
					lastData = this.historyReport[index + 1];
				}
				let data = this.historyReport[index];
				uni.navigateTo({
					url: '../fastReport/fastReport?report=' + JSON.stringify(data) + '&isHistory=' + true +
						'&lastData=' + JSON.stringify(lastData)
				});
			},
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.headView {
		width: 750rpx;
	}

	.dateTips {
		margin: 45rpx 0 30rpx;
		width: 625rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dateTips text {
		margin-left: 25rpx;
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
	}

	.dateTips_dot {
		width: 6rpx;
		height: 22rpx;
		background-color: #34C0AE;
		border-radius: 20rpx;
	}

	.NoDataView {
		width: 750rpx;
	}

	.NoDataView text {
		margin-top: 40rpx;
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: normal;
		color: #999999;
	}

	.Item {
		margin: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 662rpx;
		height: 124rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.item_l {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.item_l_des {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.item_r {
		margin-right: 50rpx;
		width: 120rpx;
		height: 43rpx;
		background: #34C0AE;
		border-radius: 22rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.item_r:active {
		background-color: #2da898;
	}

	.scroll-v {
		width: 670rpx;
		margin: 0 auto;
		height: calc(100vh - 900rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}



	/* loadmore */
	.uni-loadmore {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding-bottom: 30rpx;
	}

	.ML50 {
		margin-left: 35rpx;
	}

	.MR50 {
		margin-right: 50rpx;
	}
</style>